<template>
  <div>
    <el-dialog :lock-scroll="false" :visible.sync="visible" :showClose="false"
               :customClass="privateData.user_type==1?'privateChatPower studentsWH':'privateChatPower teacherWH'" :closeOnClickModal="true" >
      <i class="closeBtn" @click="visible = false" ></i>
      <div v-if="teaChatBox" class="teacherBox ">
        <div class="teacherBoxLeft">
          <div class="Lefttab">
            <p class="siliao" @click="LeftList = 0" :class="{active: LeftList===0}">私聊</p>
            <p class="xueyuan" @click="LeftList = 1" :class="{active: LeftList===1}">学员</p>
          </div>
          <div class="Leftbottom">
            <div v-show="LeftList===0">
              <el-scrollbar v-if="PrivateChatList.length!=0||announcementData!=''">
                <ul class="siliaoList">
                  <li :class="{active:TchatRecordAct==-1}" @click="getgongList">
                    <div class="siliaoListLeft">
                      <img src="../assets/img/private/KFimg.png"/>
                      <i v-if="announcementData.count!=0" class="noReaderNum" :class="announcementData.count>99?'greater99':'less99'">{{announcementData.count>99?'99+':announcementData.count}}</i>
                    </div>
                    <div class="siliaoListRight">
                      <p class="nameP"><span class="name">官方通知</span></p>
                      <p class="lastMess">{{announcementData.content}}</p>
                    </div>
                  </li>
                  <li :class="{xiaxian:item.is_online==0,active:item.user_id==TchatRecordAct}" v-for="(item,index) in PrivateChatList" @click="TchatRecord(item.user_id)">
                    <div class="siliaoListLeft">
                      <img :src="item.face"/>
                      <i v-if="item.count!=0" class="noReaderNum" :class="item.count>99?'greater99':'less99'">{{item.count>99?'99+':item.count}}</i>
                    </div>
                    <div class="siliaoListRight">
                      <p class="nameP"><span class="name">{{item.nick_name}}</span><span class="jinji" v-if="item.is_urgent==1">紧急</span></p>
                      <p class="lastMess" v-html="item.content"></p>
                    </div>
                    <i class="delBtn" @click.stop="delBtnBox(item.user_id)"></i>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
            <div v-show="LeftList===1">
              <p class="searchBox">
                <input placeholder="搜索昵称" v-model="searchVal"
                       :class="{getFocusstyle:getFocusBool}"
                       @keyup.enter="searchs" @focus="getFocusBool = true" @blur="getFocusBool = false" />
                <i class="searchBtn" @click="searchs"></i>
                <i class="delSearch" @click="delVal"></i>
              </p>
              <el-scrollbar v-if="studentsList.length!=0">
                <ul class="studentsList">
                  <li :class="{xiaxian:item.is_online==0}" v-for="(item,index) in seaStudentsList.length!=0?seaStudentsList:studentsList" @click="switchChat(item)">
                    <div class="studentsListLeft">
                      <img :src="item.face"/>
                    </div>
                    <div class="studentsListRight">
                      <p class="nameP"><span class="name">{{item.nickname}}</span></p>
                      <p class="lastMess">{{item.start_time}}-{{item.end_time}}</p>
                    </div>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <div class="teacherBoxRight">
          <div class="RightTop">
            <div class="name" :class="{'online':TchatRecordDataUser.is_online==1&&TchatRecordAct!=-1,'noOnline':TchatRecordDataUser.is_online==0&&TchatRecordAct!=-1}">
              {{TchatRecordAct==-1?"官方通知":TchatRecordDataUser.nick_name}}
              <div class="promptBox" v-if="TchatRecordAct!=-1">
                <p>用户名： {{TchatRecordDataUser.user_name}}</p>
                <p>性别：{{TchatRecordDataUser.sex==0?'保密':TchatRecordDataUser.sex==1?'男':'女'}}</p>
                <p>选择日期：{{TchatRecordDataUser.start_time}}</p>
                <p>可更改导师的日期：<span>{{TchatRecordDataUser.end_time}}</span></p>
              </div>
            </div>
            <span class="jinji" v-if="TchatRecordDataUser.is_urgent==1&&TchatRecordAct!=-1">紧急</span>
            <span class="report" v-if="TchatRecordAct!=-1" @click="openReport(TchatRecordDataUser.userid)">举报</span>
          </div>
          <div class="siliaochatBox" :class="{kefuchatBox:TchatRecordAct==-1}">
            <el-scrollbar v-if="TchatRecordDataLog.length!=0||announcementList.length!=0" ref="elscrollbar" style="height: 100%">
              <ul class="siliaochatBoxUl" v-if="TchatRecordAct!=-1">
                <li :class="{myself:item.send_user_id==uid}" v-for="(item,index) in TchatRecordDataLog">
                  <img class="touxiang" :src="item.face"/>
                  <div class="messageBox">
                    <p class="time">{{item.create_time}}</p>
                    <p v-if="item.send_type==0" class="info" v-html="item.content"></p>
                    <p v-else class="info"><img :src="item.content" @click="$refs.fullImg.show(item.content)"/></p>
                  </div>
                </li>
              </ul>
              <ul class="siliaochatBoxUl" v-if="TchatRecordAct==-1">
                <li v-for="(item,index) in announcementList">
                  <img class="touxiang" :src="item.face"/>
                  <div class="messageBox">
                    <p class="time">{{item.create_time}}</p>
                    <p class="info" v-html="item.content"></p>
                  </div>
                </li>
              </ul>
            </el-scrollbar>
          </div>
          <div class="sendBox" v-if="TchatRecordAct!=-1">
            <div class="sendBoxTop">
              <Poptip placement="top-start" width="359" style="height: 20px;float: left;" v-model="faceVisible">
                <a href="javascript:;" class="chatFace" title="表情符号"></a>
                <ul class="face-panel" slot="content">
                  <li v-for="(value, key) in faceList" @click="choosePrivateFace(key)"><img
                    :src="value" :title="key"></li>
                </ul>
              </Poptip>
              <el-upload
                class="avatar-uploader"
                action="http://up-z2.qiniu.com"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :data="form"
                style="float: left;height: 20px;">
                <a href="javascript:;" class="chatImg" title="选择图片"></a>
              </el-upload>
            </div>
            <textarea placeholder="快跟TA互动吧" v-model="sendContent" @keydown.prevent.enter="sendChat"></textarea>
            <img class="sendBtn" src="../assets/img/private/send_btn.png" @click="sendChat" />
          </div>
        </div>
      </div>
      <div v-if="!teaChatBox" class="studentsBox">
        <div class="studentsBoxRight">
          <div class="RightTop">
            <div class="name" :class="SchatRecordDataUser.is_online==1?'online':'noOnline'">{{SchatRecordDataUser.nick_name}}</div>
            <span class="jinji" v-if="SchatRecordDataUser.is_urgent==1">紧急</span>
            <span class="report" @click="openReport(SchatRecordDataUser.userid)">举报</span>
            <span class="changeT" @click="getCoffeeListbtn" v-if="is_edit_big_coffee==1">更改老师</span>
            <span class="comment" @click="comTvisible=true" v-if="is_edit_comment==1">点评老师</span>
          </div>
          <div class="siliaochatBox">
            <el-scrollbar v-if="SchatRecordDataLog.length!=0" ref="elscrollbar">
              <ul class="siliaochatBoxUl">
                <li :class="{myself:item.send_user_id==uid}" v-for="(item,index) in SchatRecordDataLog">
                  <img class="touxiang" :src="item.face"/>
                  <div class="messageBox">
                    <p class="time">{{item.create_time}}</p>
                    <p v-if="item.send_type==0" class="info" v-html="item.content"></p>
                    <p v-else class="info"><img :src="item.content" @click="$refs.fullImg.show(item.content)"/></p>
                  </div>
                </li>
              </ul>
            </el-scrollbar>
          </div>
          <div class="sendBox">
            <div class="sendBoxTop">
              <Poptip placement="top-start" width="359" style="height: 20px" v-model="faceVisible">
                <a href="javascript:;" class="chatFace" title="表情符号"></a>
                <ul class="face-panel" slot="content">
                  <li v-for="(value, key) in faceList" @click="choosePrivateFace(key)"><img
                    :src="value" :title="key"></li>
                </ul>
              </Poptip>
              <el-upload
                class="avatar-uploader"
                action="http://up-z2.qiniu.com"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :data="form"
                style="display: inline-block;height: 20px;">
                <a href="javascript:;" class="chatImg" title="选择图片"></a>
              </el-upload>
              <div class="emergency" @click="askBox">
                {{SchatRecordDataUser.is_urgent==1?'结束紧急询问（'+private_chat_num+'）':'紧急询问（'+private_chat_num+'）'}}
                <div class="quser">
                  <div class="jinjiBox">
                    <p>1、紧急询问老师会先回复你的问题哟；</p>
                    <p>2、点击紧急询问并发送内容发起紧急询问模式；</p>
                    <p>3、发起紧急询问后，若收到导师回复10分钟无回复，此模式将关闭；</p>
                    <p>4、若发起紧急询问导师10分钟内不回复将不扣除次数；</p>
                    <p>5、发起后可点击结束紧急询问结束该模式；手动结束将扣除紧急询问次数；若未发送内容可直接关闭，不扣除次数；</p>
                    <p>6、每月有5次紧急询问机会，仅当月有效；每月1号重置次数；</p>
                  </div>
                </div>
              </div>
            </div>
            <textarea placeholder="快跟TA互动吧" v-model="sendContent" @keydown.prevent.enter="sendChat" ></textarea>
            <img class="sendBtn" src="../assets/img/private/send_btn.png" @click="sendChat" />
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="reportVisible" :lock-scroll="false" :showClose="false"
               customClass="reportPop" :closeOnClickModal="true">
      <i class="closeBtn" @click="reportVisible=false" ></i>
      <p class="title">请选择举报理由</p>
      <el-radio-group v-model="reportVal">
        <el-radio :label="1">发表敏感、攻击、不当言论</el-radio>
        <el-radio :label="2">提供个人联系方式</el-radio>
        <el-radio :label="3">违法行为（诈骗、违禁品、反动等）</el-radio>
        <el-radio :label="4">其他</el-radio>
      </el-radio-group>
      <p class="tishi">必填（300字符内）</p>
      <textarea placeholder="请输入举报内容" maxlength="300" v-model.trim="reportTextarea"></textarea>
      <p class="code">
        <input placeholder="输入验证码" v-model.trim="codeNum" />
        <img :src="reportCode" @click="changeCode" title="点击刷新"/>
      </p>
      <p class="allBtn">
        <a class="cancel" @click="reportVisible = false">取消</a>
        <a class="submit" @click="submitReport">提交</a>
      </p>
    </el-dialog>
    <el-dialog title="点评老师" :lock-scroll="false" :visible.sync="comTvisible" customClass="comTeache">
      <el-radio-group v-model="comVal">
        <el-radio :label="1">支持老师</el-radio>
        <el-radio :label="2">我要吐槽</el-radio>
      </el-radio-group>
      <textarea placeholder="请输入点评内容（300字符）" maxlength="300" v-model.trim="comtextarea"></textarea>
      <div class="allBtn">
        <a class="cancel" @click="comTvisible=false">取消</a>
        <a class="submit" @click="commenMentor">提交</a>
      </div>
    </el-dialog>
    <el-dialog title="确认要关闭吗" :lock-scroll="false" :visible.sync="askBool" customClass="askClose">
      <div class="info">
        <p>确认关闭吗？</p>
        <p>我们已经通知老师，老师正在赶来回答的路上啦~</p>
        <p>注：手动关闭将会扣除询问次数~若老师10分钟未回答将会自动关闭并不会扣除次数哦~</p>
      </div>
      <div class="allBtn">
        <a class="cancel" @click="askBool=false">再想想</a>
        <a class="submit" @click="sureClose">不等啦</a>
      </div>
    </el-dialog>
    <el-dialog title="选择导师" :lock-scroll="false" :visible.sync="chooseBool" customClass="chooseClose">
      <div class="info">
        <p>是否确定要选择{{Tname}}老师的私聊服务30天内不可以更改哦？</p>
        <p>注：如有疑问，联系客服</p>
      </div>
      <div class="allBtn">
        <a class="cancel" @click="chooseBool=false">再想想</a>
        <a class="submit" @click="sureChoose">确认</a>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="teacherListVisible" :lock-scroll="false" :showClose="false"
               :customClass="coffeeListLen>3?'moreFive teacherList':'teacherList'" :closeOnClickModal="true">
      <i class="closeBtn" @click="teacherListVisible = false" ></i>
      <p class="title">请选择您的导师</p>
      <div class="swiper-view" v-if="coffeeListLen!=0">
        <div class="button-prev-z" @click="swiper.slidePrev()" v-if="coffeeListLen>8"></div>
        <div class="button-next-z" @click="swiper.slideNext()" v-if="coffeeListLen>8"></div>
        <swiper :options="swiperOption"  ref="myteaSwiper">
          <swiper-slide class="clearfix" v-for="(item,index) in coffeeList">
            <div class="slideBox" :class="{lessFour:coffeeListLen<4}" v-for="(items,index) in item">
              <img :src="items.headimg"/>
              <p class="name"><i :class="{active:items.id==chooseAct}" @click="activeChoose(items.id,items.name)"></i><span>{{items.name}}</span></p>
              <p class="haop">好评率：{{items.good_comment}}%</p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="znawu" v-if="coffeeListLen==0">暂无导师</div>
      <div class="bottomBtn" v-if="coffeeListLen!=0">
        <span @click="askChoose">确认选择</span>
        <a href="http://www.xilongfx.com/private_tutor">导师详细介绍 >></a>
      </div>
    </el-dialog>
    <full-img ref="fullImg"/>
  </div>
</template>

<script>
  import ImgLibrary from "./ImgLibrary";
  import fullImg from './full-img.vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import Poptip from 'iview/src/components/poptip'

  export default {
    components: {
      ImgLibrary,
      fullImg,
      swiper,
      swiperSlide,
      Poptip
    },
    computed: {
      swiper () {
        return this.$refs.myteaSwiper.swiper
      },
    },
    data () {
      return {
        sendContent: '',
        faceVisible: false,
        swiperOption: {
          slidesPerView: 1,
          spaceBetween: 0,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        },
        visible: false,
        teaChatBox: false,
        LeftList: 0,
        reportVisible: false,
        comTvisible: false,
        chooseBool: false,
        teacherListVisible: false,
        reportVal: 1,
        comVal: 1,
        searchVal: '',
        getFocusBool: false,
        askBool: false,
        coffeeList: [],
        coffeeListLen: 0,
        chooseAct: '',
        privateData: {},
        studentsList: [],
        seaStudentsList: [],
        PrivateChatList: [],
        TchatRecordDataUser: [],
        SchatRecordDataUser:[],
        TchatRecordDataLog: [],
        SchatRecordDataLog: [],
        TchatRecordAct: -1,
        uid: '',
        announcementData: [],
        announcementList: [],
        reportCode: '',
        submitReportId: '',
        reportTextarea: '',
        codeNum: '',
        is_edit_big_coffee: 0,
        is_edit_comment: 0,
        private_chat_num: 5,
        comtextarea: '',
        form: {},
        faceList: {},
        closeJinji: true,
        is_urgents: 0,
        Tname: '',
      }
    },
    mounted () {

    },
    created () {

    },
    methods: {
      //表情
      initFace () {
        const face = [
          '[微笑]',
          '[嘻嘻]',
          '[哈哈]',
          '[可爱]',
          '[可怜]',
          '[挖鼻]',
          '[吃惊]',
          '[害羞]',
          '[挤眼]',
          '[闭嘴]',
          '[鄙视]',
          '[爱你]',
          '[泪]',
          '[偷笑]',
          '[亲亲]',
          '[生病]',
          '[太开心]',
          '[白眼]',
          '[右哼哼]',
          '[左哼哼]',
          '[嘘]',
          '[衰]',
          '[委屈]',
          '[吐]',
          '[哈欠]',
          '[抱抱]',
          '[怒]',
          '[疑问]',
          '[馋嘴]',
          '[拜拜]',
          '[思考]',
          '[汗]',
          '[困]',
          '[睡]',
          '[钱]',
          '[失望]',
          '[酷]',
          '[色]',
          '[哼]',
          '[鼓掌]',
          '[晕]',
          '[悲伤]',
          '[抓狂]',
          '[黑线]',
          '[阴险]',
          '[怒骂]',
          '[互粉]',
          '[心]',
          '[伤心]',
          '[猪头]',
          '[熊猫]',
          '[兔子]',
          '[ok]',
          '[耶]',
          '[good]',
          '[NO]',
          '[赞]',
          '[来]',
          '[弱]',
          '[草泥马]',
          '[神马]',
          '[囧]',
          '[浮云]',
          '[给力]',
          '[围观]',
          '[威武]',
          '[奥特曼]',
          '[礼物]',
          '[钟]',
          '[话筒]',
          '[蜡烛]',
          '[蛋糕]']
        let tempFace = {}
        for (let i = 0; i < face.length; i++) {
          if (~[10, 15, 23, 26, 55, 58].indexOf(i)) {
            continue
          }
          tempFace[face[i]] = `../../static/img/face/${i}.gif`
        }
        this.faceList = tempFace
      },
      //选择表情
      choosePrivateFace (key, chat) {
        this.sendContent += `face${key} `
        this.faceVisible = false
        document.querySelector(`.sendBox textarea`).focus()
      },
      //初始化
      initialPage (privateData) {
        this.initFace()
        this.privateData = privateData
        this.uid = privateData.user_id
        if (privateData.user_type==1&&privateData.is_add_big_coffee==0) {
          this.teacherListVisible = true
          this.getCoffeeList()
        } else if (privateData.user_type==1&&privateData.is_add_big_coffee==1) {
          this.visible = true
          this.teaChatBox = false
          this.$emit('cancel-chat-total',{count:-1})
          this.$http.post('/index/Privatechat/getPrivateChatLogList').then((data) => {
            if (data.code==1) {
              this.SchatRecordDataUser = data.data.user_info
              this.TchatRecordAct =  data.data.user_info.userid
              this.is_edit_big_coffee = data.data.is_edit_big_coffee
              this.SchatRecordDataLog = data.data.log_list
              this.is_edit_comment = data.data.is_edit_comment
              this.is_urgents = data.data.user_info.is_urgent
              this.private_chat_num = data.data.urgent_remain_count
              this.$nextTick(() => {
                var div = this.$refs['elscrollbar'].$refs['wrap']
                div.scrollTop = div.scrollHeight
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        } else if (privateData.user_type==2) {
          this.getAnnouncement()
          this.getAnnouncementList()
          this.getstudentsList()
          this.getPrivateChatList()
          this.visible = true
          this.teaChatBox = true
        }
      },
      //成员列表切换到私聊列表
      switchChat (item) {
        this.LeftList = 0
        if (this.PrivateChatList.length==0) {
          let chatBox = {
            'content':item.content,
            'count':0,
            'face': item.face,
            'is_online':item.is_online,
            'is_urgent':item.is_urgent,
            'nick_name':item.nickname,
            'user_id':item.userid
          }
          this.PrivateChatList.unshift(chatBox)
          this.TchatRecordAct = item.user_id
          this.TchatRecord(item.userid)
          return
        }
        for (let i=0;i<this.PrivateChatList.length;i++) {
          if (item.userid==this.PrivateChatList[i].user_id) {
            this.TchatRecordAct = item.user_id
            this.TchatRecord(item.userid)
            break
          } else if (item.userid!=this.PrivateChatList[i].user_id&&i==this.PrivateChatList.length-1) {
            let chatBox = {
              'content':item.content,
              'count':0,
              'face': item.face,
              'is_online':item.is_online,
              'is_urgent':item.is_urgent,
              'nick_name':item.nickname,
              'user_id':item.userid
            }
            this.PrivateChatList.unshift(chatBox)
            this.TchatRecordAct = item.user_id
            this.TchatRecord(item.userid)
            break
          }
        }
      },
      //获取老师列表
      getCoffeeList () {
        this.$http.post('/index/Privatechat/getBigCoffeeList').then((data) => {
          if (data.code==1) {
            this.coffeeList = data.data
            this.coffeeListLen = data.count
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //获取聊天框学员列表
      getstudentsList () {
        this.$http.post('/index/Privatechat/getBigCoffeeUserList').then((data) => {
          if (data.code==1) {
            this.studentsList = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //获取聊天框临时聊天列表
      getPrivateChatList () {
        this.$http.post('/index/Privatechat/getPrivateChatList').then((data) => {
          if (data.code==1) {
            this.PrivateChatList = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //获取官方通知信息
      getAnnouncement () {
        this.$http.post('/index/Privatechat/getPrivateChatNoticeInfo').then((data) => {
          if (data.code==1) {
            this.announcementData = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //获取官方通知消息列表
      getAnnouncementList () {
        this.$http.post('/index/Privatechat/getPrivateChatNoticeLog').then((data) => {
          if (data.code==1) {
            this.announcementList = data.data
            if (data.data.length!=0) {
              this.$nextTick(() => {
                var div = this.$refs['elscrollbar'].$refs['wrap']
                div.scrollTop = div.scrollHeight
              })
            }
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //更改老师
      getCoffeeListbtn () {
        this.teacherListVisible = true
        this.getCoffeeList()
      },
      //打开举报
      openReport (userId) {
        this.reportVisible = true
        this.submitReportId = userId
        this.reportTextarea = ''
        this.codeNum = ''
      },
      //提交举报
      submitReport () {
        if (this.reportTextarea=='') {
          this.$message.error('举报内容不能为空！')
          return
        }
        if (this.codeNum=='') {
          this.$message.error('验证码不能为空！')
          return
        }
        this.$http.post('/index/Privatechat/submitInform',
          {receive_user_id:this.submitReportId,type:this.reportVal,content:this.reportTextarea,captcha:this.codeNum}
          ).then((data) => {
          if (data.code==1) {
            this.$message.success(data.msg)
            this.reportVisible = false
          } else {
            this.$message.error(data.msg)
            this.reportCode = '/index/Privatechat/createCaptcha?'+Math.random()
          }
        })
      },
      //老师聊天框
      TchatRecord (user_id) {
        this.$http.post('/index/Privatechat/getPrivateChatLogList',{receive_user_id:user_id}).then((data) => {
          if (data.code==1) {
            this.PrivateChatList.forEach((item,index)=>{
              if (item.user_id == user_id) {
                this.$emit('cancel-chat-total',{count:item.count})
                this.$set(this.PrivateChatList[index], `count`, 0)
              }
            })
            this.TchatRecordDataUser = data.data.user_info
            this.TchatRecordDataLog = data.data.log_list
            this.is_urgents = data.data.user_info.is_urgent
            this.TchatRecordAct = user_id
            this.$nextTick(() => {
              var div = this.$refs['elscrollbar'].$refs['wrap']
              div.scrollTop = div.scrollHeight
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //删除临时聊天
      delBtnBox (user_id) {
        this.$http.post('/index/Privatechat/closeWindown',{seceive_user_id:user_id}).then((data) => {
          if (data.code==1) {
            this.PrivateChatList.forEach((item,index)=>{
              if(item.user_id==user_id) {
                this.PrivateChatList.splice(index, 1)
                if(this.TchatRecordAct==user_id) {
                  this.TchatRecordAct = -1
                }
                this.$message.success(data.msg)
                return
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //获取验证码
      changeCode () {
        this.reportCode = '/index/Privatechat/createCaptcha?'+Math.random()
      },
      //临时聊天框选择
      activeChoose (teaId,Tname) {
        this.chooseAct = teaId
        this.Tname = Tname
      },
      //询问确认选择老师
      askChoose () {
        if(this.chooseAct=='') {
          this.$message.warning('导师不能为空！')
          return
        }
        this.chooseBool =true
      },
      //确认选择老师
      sureChoose () {
        this.$http.post('/index/Privatechat/editBigCoffee',{big_coffee_id:this.chooseAct}).then((data) => {
          if (data.code==1) {
            this.chooseBool = false
            this.teacherListVisible = false
            this.$message.success('选择成功！')
            setTimeout(function (){
              window.location.reload()
            }, 1000);
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //学员列表搜索
      searchs () {
        if (this.searchVal=='') {
          this.$message.warning('搜索不能为空！')
          return
        }
        this.seaStudentsList = []
        let _this = this;
        this.studentsList.map(function(item) {
          if (item.nickname.indexOf(_this.searchVal) != -1) {
            _this.seaStudentsList.push(item);
          }
        });
        console.log(_this.seaStudentsList,"111")
      },
      //删除搜索
      delVal () {
        this.searchVal = ''
        this.seaStudentsList = []
      },
      //点评老师
      commenMentor() {
        if (this.comtextarea=='') {
          this.$message.error('点评内容不能为空！')
          return
        }
        this.$http.post('/index/Privatechat/commentBigCoffee',
          {type:this.comVal,content:this.comtextarea}
          ).then((data) => {
          if (data.code==1) {
            this.$message.success(data.msg)
            this.comTvisible = false
            this.is_edit_comment = 0
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //紧急询问
      askBox () {
        if (this.private_chat_num==0) {
          this.$message.error('您的紧急次数已用完！')
          return
        }
        if(this.SchatRecordDataUser.is_urgent==1&&this.closeJinji) {
          this.askBool = true
        } else if(this.SchatRecordDataUser.is_urgent==1&&!this.closeJinji) {
          this.SchatRecordDataUser.is_urgent=0
          this.is_urgents = 0
        } else {
          this.SchatRecordDataUser.is_urgent=1
          this.is_urgents = 1
          this.closeJinji = false
        }
      },
      //确认关闭紧急
      sureClose () {
        this.$http.post('/index/Privatechat/closeUrgent').then((data) => {
          if (data.code==1) {
            this.askBool=false
            this.private_chat_num = data.data.remainCount
            this.SchatRecordDataUser.is_urgent=0
            this.is_urgents = 0
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //发送图片
      handleAvatarSuccess (file) {
        let params = {
          receive_user_id: this.TchatRecordAct,
          content: file.key,
          send_type: 1,
          is_urgent: this.is_urgents
        }
        this.$http.post('/index/Privatechat/sendPrivateChat', params).then(res => {
          if (Number(res.code) === 0) {
            this.$message.error(res.msg)
          }
        })
      },
      beforeAvatarUpload (file) {
        if (file.size / 1024 / 1024 > 2) {
          this.$message.error('上传图片大小不能超过 2MB!')
          return false
        }
        console.log(this.$http.get('/index/beta_api/uploadQiniu', {isFile: true}).then((data) => {
          this.form = {token: data}
        }))
        return this.$http.get('/index/beta_api/uploadQiniu', {isFile: true}).then((data) => {
          this.form = {token: data}
        })
      },
      //发送消息
      sendChat () {
        let content = this.replaceFace(this.sendContent)
        if (!content) {
          this.$message.error('请输入内容!')
          return
        }
        let params = {
          receive_user_id: this.TchatRecordAct,
          content: content,
          send_type: 0,
          is_urgent: this.is_urgents
        }
        this.$http.post('/index/Privatechat/sendPrivateChat', params).then(res => {
          this.sendContent = ''
          if (Number(res.code) === 0) {
            this.$message.error(res.msg)
          }
        })
      },
      replaceFace (content) {
        return content.replace(/face\[([^\s\[\]]+?)\]/g, i => {
          let a = i.replace(/^face/g, '')
          return `<img alt="${a}" title="${a}" src="${this.faceList[a]}">`
        })
      },
      pushMessage (data) {
        if (!this.visible) {
          this.$emit('add-chat-total')
        }
        let item = {
          content: data.content,
          create_time: data.create_time,
          face:data.face,
          receive_user_id:data.receive_user_id,
          send_type:data.send_type,
          send_user_id:data.user_id,
        }
        if (this.privateData.user_type==1) {
          this.SchatRecordDataLog.push(item)
          this.SchatRecordDataUser.is_online = data.is_online
          this.SchatRecordDataUser.is_urgent = data.is_urgent
          this.closeJinji = true
          this.is_urgents = data.is_urgent
        } else if (this.privateData.user_type==2) {
          if (this.TchatRecordAct==data.student_user_id) {
            this.TchatRecordDataUser.is_online = data.is_online
            this.TchatRecordDataUser.is_urgent = data.is_urgent
            this.is_urgents = data.is_urgent
          }
          if (this.visible && data.student_user_id!=this.TchatRecordAct) {
            this.$emit('add-chat-total')
            try {
              this.PrivateChatList.forEach((value,index)=>{
                if (value.user_id==data.student_user_id) {
                  let countNum= this.PrivateChatList[index].count*1+1
                  this.$set(this.PrivateChatList[index], `count`,countNum)
                  if (data.is_urgent==1) {
                    let arr = this.PrivateChatList[index]
                    this.PrivateChatList.splice(index,1)
                    this.PrivateChatList.unshift(arr)
                  }
                  throw new Error("StopforEach")
                } else if(value.user_id!=data.student_user_id&&this.PrivateChatList.length-1==index){
                  let items = {
                    content: data.content,
                    count: 1,
                    face:data.face,
                    is_online:data.is_online,
                    is_urgent:data.is_urgent,
                    nick_name:data.nick_name,
                    user_id: data.student_user_id
                  }
                  if (data.is_urgent==1) {
                    this.PrivateChatList.unshift(items)
                  } else {
                    this.PrivateChatList.push(items)
                  }
                  throw new Error("StopforEach")
                }
              })
            } catch(e) {

            }
          }
          this.TchatRecordDataLog.push(item)
          this.PrivateChatList.forEach((value,index)=>{
            if (value.user_id==data.student_user_id) {
              this.$set(this.PrivateChatList[index], `is_online`, data.is_online)
              this.$set(this.PrivateChatList[index], `is_urgent`, data.is_urgent)
              if (data.send_type==1) {
                value.content = '[图片]'
              } else {
                value.content = data.content
              }
            }
          })
        }
        this.$nextTick(() => {
          var div = this.$refs['elscrollbar'].$refs['wrap']
          div.scrollTop = div.scrollHeight
        })
      },
      pushgonggao (data) {
        if (this.TchatRecordAct!=-1) {
          this.announcementData.count++
        }
        this.announcementData.content = data.content
        let item = {
          content: data.content,
          create_time: data.create_time,
          face:data.face,
        }
        this.announcementList.push(item)
        if (data.opera_type==1) {
          let chatBox = {
            'content':data.content,
            'face': item.face,
            'is_online':1,
            'is_urgent':0,
            'nickname':data.student_user_name,
            'userid':data.student_user_id,
            'user_id':data.student_user_id,
            'end_time':data.end_time,
            'start_time':data.start_time,
          }
          try {
            this.studentsList.forEach((value,index)=>{
              if (value.userid==data.student_user_id) {
                throw new Error("StopforEach")
              } else if(value.user_id!=data.student_user_id&&this.PrivateChatList.length-1==index){
                this.studentsList.push(chatBox)
                throw new Error("StopforEach")
              }
            })
          } catch(e) {

          }
        }
        this.$nextTick(() => {
          var div = this.$refs['elscrollbar'].$refs['wrap']
          div.scrollTop = div.scrollHeight
        })
      },
      getgongList () {
        this.TchatRecordAct = -1
        this.announcementData.count = 0
      },
      remainCount (data) {
        if (this.privateData.user_type==1) {
          this.SchatRecordDataUser.private_chat_num=data.remainCount
          this.SchatRecordDataUser.is_urgent = 0
          this.is_urgents = 0
        } else if (this.privateData.user_type==2) {
          if (this.TchatRecordAct==data.user_id) {
            this.TchatRecordDataUser.is_urgent = 0
            this.is_urgents = 0
          }
          this.PrivateChatList.forEach((value,index)=>{
            if (value.user_id==data.user_id) {
              this.$set(this.PrivateChatList[index], `is_urgent`, 0)
            }
          })
        }
      },
    },
    watch: {
      searchVal (newName, oldName) {
        if (newName=='') {
          this.seaStudentsList = []
        }
      },
      reportVisible: function (val, oldVal) {
        if (val) {
          this.reportCode = '/index/Privatechat/createCaptcha?'+Math.random()
        }
      }
    }
  }
</script>

<style lang="scss">
  .privateChatPower {
    &.teacherWH {
      width: 890px;
      height: 555px;
    }
    &.studentsWH {
      width: 650px;
      height: 555px;
    }
    border-radius: 10px;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      .el-scrollbar__bar.is-horizontal {
        display: none;
      }
      .el-scrollbar__wrap{
        overflow-x: hidden;
        margin-bottom: 0!important;
      }
      .el-scrollbar__bar.is-vertical {
        background: rgba(0,0,0,0.2);
      }
      .el-scrollbar__thumb {
        background: #3c92e8;
      }
      padding: 0px;
      height: 100%;
      .closeBtn {
        width: 40px;
        height: 40px;
        content: '';
        display: block;
        transition: background .2s linear;
        background: url("../assets/img/strategy/close_hover_icon.png");
        position: absolute;
        cursor: pointer;
        top: -15px;
        right: -15px;
      }
      .teacherBox {
        display: flex;
        width: 100%;
        height: 100%;
        .teacherBoxLeft {
          width: 240px;
          background-color: #ffffff;
          border-radius: 10px 0 0 10px;
          .Lefttab {
            padding: 0 15px;
            height: 64px;
            width: 100%;
            line-height: 64px;
            display: flex;
            border-bottom: 1px solid #edf0f2;
            p {
              flex: 1;
              font-size: 16px;
              color: #96a1b3;
              text-align: left;
              position: relative;
              text-indent: 52px;
              cursor: pointer;
              &.siliao {
                &:before {
                  width: 20px;
                  height: 20px;
                  content: '';
                  position: absolute;
                  background: url("../assets/img/private/siliao_icon1.png");
                  left: 20px;
                  top: 24px;
                }
              }
              &.xueyuan {
                &:before {
                  width: 22px;
                  height: 19px;
                  content: '';
                  position: absolute;
                  background: url("../assets/img/private/student_icon1.png");
                  left: 20px;
                  top: 22px;
                }
              }
              &.active {
                color: #218ff8;
                &.siliao {
                  &:before {
                    background: url("../assets/img/private/siliao_icon2.png");
                  }
                }
                &.xueyuan {
                  &:before {
                    background: url("../assets/img/private/student_icon2.png");
                  }
                }
                &:after {
                  position: absolute;
                  content: '';
                  width: 105px;
                  height: 1px;
                  background-color: #218ff8;
                  bottom: -1px;
                  left: 0;
                }
              }
            }
          }
          .Leftbottom {
            width: 100%;
            height: 490px;
            .siliaoList {
              max-height: 490px;
              li {
                width: 100%;
                padding: 14px 15px;
                height: 70px;
                cursor: pointer;
                position: relative;
                -webkit-transition: all 0.2s linear;
                -moz-transition: all 0.2s linear;
                -ms-transition: all 0.2s linear;
                -o-transition: all 0.2s linear;
                transition: all 0.2s linear;
                .delBtn {
                  position: absolute;
                  background: url("../assets/img/private/close_icon.png");
                  width: 17px;
                  height: 17px;
                  right: 18px;
                  top: 36px;
                  display: none;
                  &:hover {
                    background: url("../assets/img/private/close_iconHover.png");
                  }
                }
                &:hover {
                  background: #eaf0fd;
                  .delBtn {
                    display: block;
                  }
                }
                &.active {
                  background: #eaf0fd;
                }
                display: flex;
                .siliaoListLeft {
                  width: 42px;
                  height: 42px;
                  position: relative;
                  margin-right: 12px;
                  .noReaderNum {
                    background-color: #3c92e9;
                    font-size: 12px;
                    text-align: center;
                    color: #ffffff;
                    position: absolute;
                    &.less99 {
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      line-height: 18px;
                      right: -6px;
                      top: -6px;
                    }
                    &.greater99 {
                      width: 29px;
                      height: 16px;
                      background-color: #3c92e9;
                      border-radius: 7px;
                      line-height: 14px;
                      right: -10px;
                      top: -4px;
                    }
                  }
                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
                &.xiaxian {
                  .siliaoListLeft {
                    img {
                      -webkit-filter: grayscale(100%);
                      -moz-filter: grayscale(100%);
                      -ms-filter: grayscale(100%);
                      -o-filter: grayscale(100%);
                      filter: grayscale(100%);
                      filter: gray();
                    }
                  }
                  .siliaoListRight {
                    .nameP {
                      .name {
                        color: #667388;
                      }
                    }
                  }
                }
                .siliaoListRight {
                  .nameP {
                    .name {
                      font-size: 14px;
                      font-weight: bold;
                      color: #16315c;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      max-width: 100px;
                      display: inline-block;
                      line-height: 15px;
                    }
                    .jinji {
                      float: right;
                      width: 35px;
                      height: 15px;
                      background-color: #eb5628;
                      border-radius: 3px;
                      font-size: 12px;
                      color: #ffffff;
                      line-height: 15px;
                      text-align: center;
                      margin-top: 2px;
                      margin-left: 6px;
                    }
                  }
                  .lastMess {
                    font-size: 12px;
                    max-width: 150px;
                    color: #16315c;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 12px;
                  }
                }
              }
            }
            .searchBox {
              width: 210px;
              height: 30px;
              margin: 20px auto;
              position: relative;
              input {
                border-radius: 15px;
                border: solid 1px #e1e2e5;
                width: 100%;
                height: 100%;
                padding-left: 15px;
                font-size: 12px;
                color: #333;
              }
              .delSearch {
                position: absolute;
                width: 8px;
                height: 8px;
                cursor: pointer;
                background: url("../assets/img/private/del_icon.png");
                top: 11px;
                right: 33px;
              }
              .searchBtn {
                position: absolute;
                width: 14px;
                height: 16px;
                cursor: pointer;
                background: url("../assets/img/private/search_icon.png");
                top: 6px;
                right: 12px;
              }
              input::-webkit-input-placeholder{
                color:#a1a8b3;
              }
              input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:#a1a8b3;
              }
              input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:#a1a8b3;
              }
              input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
                color:#a1a8b3;
              }
              .getFocusstyle {
                border: solid 1px #3c92e9;
              }
            }
            .studentsList {
              max-height: 420px;
              li {
                width: 100%;
                padding: 14px 15px;
                height: 70px;
                cursor: pointer;
                position: relative;
                -webkit-transition: all 0.2s linear;
                -moz-transition: all 0.2s linear;
                -ms-transition: all 0.2s linear;
                -o-transition: all 0.2s linear;
                transition: all 0.2s linear;
                &:hover {
                  background: #eaf0fd;
                  .delBtn {
                    display: block;
                  }
                }
                display: flex;
                .studentsListLeft {
                  width: 42px;
                  height: 42px;
                  position: relative;
                  margin-right: 12px;
                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
                &.xiaxian {
                  .studentsListLeft {
                    img {
                      -webkit-filter: grayscale(100%);
                      -moz-filter: grayscale(100%);
                      -ms-filter: grayscale(100%);
                      -o-filter: grayscale(100%);
                      filter: grayscale(100%);
                      filter: gray();
                    }
                  }
                  .studentsListRight {
                    .nameP {
                      .name {
                        color: #667388;
                      }
                    }
                  }
                }
                .studentsListRight {
                  .nameP {
                    line-height: 22px;
                    .name {
                      font-size: 14px;
                      font-weight: bold;
                      color: #16315c;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      max-width: 100px;
                      display: inline-block;
                      line-height: 15px;
                    }
                  }
                  .lastMess {
                    font-size: 12px;
                    max-width: 150px;
                    color: #737f93;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 12px;
                    &:before {
                      content: '';
                      width: 14px;
                      height: 13px;
                      background: url("../assets/img/private/date.png");
                      display: inline-block;
                      margin-right: 6px;
                      -webkit-transform: translateY(1px);
                      -moz-transform: translateY(1px);
                      -ms-transform: translateY(1px);
                      -o-transform: translateY(1px);
                      transform: translateY(1px);
                    }
                  }
                }
              }
            }
          }
        }
        .teacherBoxRight {
          padding: 0 20px 10px;
          flex: 1;
          background-color: #eaf0fd;
          border-radius: 0 10px 10px 0px;
          .RightTop {
            height: 65px;
            line-height: 65px;
            border-bottom: 1px solid #d7deed;
            .report {
              font-size: 14px;
              color: #5a6980;
              float: right;
              margin-right: 10px;
              cursor: pointer;
              -webkit-transition: all .2s linear;
              -moz-transition: all .2s linear;
              -ms-transition: all .2s linear;
              -o-transition: all .2s linear;
              transition: all .2s linear;
              &:hover {
                color: #3c92e8;
              }
            }
            .jinji {
              width: 35px;
              height: 15px;
              background-color: #eb5628;
              border-radius: 3px;
              font-size: 12px;
              color: #ffffff;
              line-height: 15px;
              text-align: center;
              display: inline-block;
              margin-left: 10px;
              -webkit-transform: translateY(-3px);
              -moz-transform: translateY(-3px);
              -ms-transform: translateY(-3px);
              -o-transform: translateY(-3px);
              transform: translateY(-3px);
            }
            .name {
              font-size: 18px;
              font-weight: bold;
              color: #16315c;
              display: inline-block;
              position: relative;
              &:hover {
                .promptBox {
                  display: block;
                }
              }
              &:after {
                display: inline-block;
                width: 10px;
                height: 10px;
                content: '';
                border-radius: 50%;
                margin-left: 10px;
                -webkit-transform: translateY(-2px);
                -moz-transform: translateY(-2px);
                -ms-transform: translateY(-2px);
                -o-transform: translateY(-2px);
                transform: translateY(-2px);
              }
              &.online {
                &:after {
                  background-color: #218ff8;
                  box-shadow: 0px 3px 8px 0px rgba(60, 146, 233, 0.67);
                }
              }
              &.noOnline {
                &:after {
                  background-color: #b2bdc5;
                  box-shadow: 0px 3px 8px 0px #c6cad4;
                }
              }
              .promptBox {
                display: none;
                width: 210px;
                height: 90px;
                background-color: #ffffff;
                box-shadow: 0px 5px 15px 0px rgba(68, 146, 225, 0.26);
                border: solid 1px #dde1e6;
                position: absolute;
                z-index: 1;
                padding: 9px 12px 12px 18px;
                top: 22px;
                right: -224px;
                p {
                  font-size: 12px;
                  color: #374a68;
                  font-weight: normal;
                  line-height: 18px;
                  span {
                    color: #3c92e9;
                  }
                }
                &:before {
                  position: absolute;
                  content: '';
                  width: 0;
                  height: 0;
                  top: 8px;
                  left: -12px;
                  border-top: 6px solid transparent;
                  border-bottom: 6px solid transparent;
                  border-right: 6px solid #fff;
                  border-left: 6px solid transparent;
                }
              }
            }
          }
          .siliaochatBox {
            height: 400px;
            padding: 10px 0;
            .siliaochatBoxUl {
              max-height: 380px;
              width: 100%;
              li {
                overflow: hidden;
                margin-bottom: 10px;
                &:last-child {
                  margin-bottom: 0;
                }
                .touxiang {
                  float: left;
                  width: 38px;
                  height: 38px;
                  border-radius: 50%;
                  margin-right: 26px;
                  margin-top: 25px;
                }
                .messageBox {
                  float: left;
                  max-width: 400px;
                  text-align: center;
                  .time {
                    font-size: 12px;
                    color: #737699;
                  }
                  .info {
                    padding: 6px 20px 6px 13px;
                    font-size: 14px;
                    color: #233e68;
                    background: #fff;
                    border-radius: 16px;
                    margin-top: 4px;
                    position: relative;
                    text-align: left;
                    line-height: 20px;
                    img {
                      max-height: 70px;
                      cursor: pointer;
                      float: initial;
                    }
                    &:before {
                      position: absolute;
                      content: '';
                      width: 0;
                      height: 0;
                      top: 10px;
                      left: -11px;
                      border-top: 6px solid transparent;
                      border-bottom: 6px solid transparent;
                      border-right: 6px solid #fff;
                      border-left: 6px solid transparent;
                    }
                  }
                }
                &.myself {
                  text-align: right;
                  img {
                    float: right;
                    margin-left: 26px;
                  }
                  .messageBox {
                    float: right;
                    .info {
                      background: #3c92e9;
                      color: #ffffff;
                      &:before {
                        right: -11px;
                        border-right: 6px solid transparent;
                        border-left: 6px solid #3c92e9;
                        left: auto;
                      }
                      img {
                        float: initial;
                        margin: 0;
                      }
                    }
                  }
                }
              }
            }
            &.kefuchatBox {
              height: 480px;
              .siliaochatBoxUl {
                max-height: 460px;
              }
            }
          }
          .sendBox {
            height: 80px;
            background-color: #ffffff;
            box-shadow: 0px -2px 9px 0px rgba(60, 146, 233, 0.09);
            border-radius: 5px;
            width: 100%;
            padding: 0 15px;
            position: relative;
            .ivu-poptip-popper {
              position: absolute!important;
            }
            .sendBoxTop {
              padding-top: 6px;
              height: 30px;
              img {
                cursor: pointer;
              }
              .chatImg {
                width: 24px;
                height: 18px;
                background: url("../assets/img/private/pic_icon.png");
                display: inline-block;
                margin-left: 10px;
              }
              .chatFace {
                width: 20px;
                height: 20px;
                background: url("../assets/img/private/biaioqing_icon.png");
                display: inline-block;
              }
            }
            textarea {
              height: 50px;
              width: 100%;
              font-size: 12px;
              color: #333;
              border: none;
            }
            .sendBtn {
              width: 71px;
              height: 71px;
              position: absolute;
              top: 8px;
              right: 0px;
              cursor: pointer;
            }
          }
        }
      }
      .studentsBox {
        width: 650px;
        height: 555px;
        .studentsBoxRight {
          padding: 0 20px 10px;
          border-radius: 10px;
          width: 100%;
          height: 100%;
          background-color: #eaf0fd;
          .RightTop {
            height: 65px;
            line-height: 65px;
            border-bottom: 1px solid #d7deed;
            .report {
              font-size: 14px;
              color: #5a6980;
              float: right;
              margin-right: 10px;
              cursor: pointer;
              -webkit-transition: all .2s linear;
              -moz-transition: all .2s linear;
              -ms-transition: all .2s linear;
              -o-transition: all .2s linear;
              transition: all .2s linear;
              &:hover {
                color: #3c92e8;
              }
            }
            .jinji {
              width: 35px;
              height: 15px;
              background-color: #eb5628;
              border-radius: 3px;
              font-size: 12px;
              color: #ffffff;
              line-height: 15px;
              text-align: center;
              display: inline-block;
              margin-left: 10px;
              -webkit-transform: translateY(-3px);
              -moz-transform: translateY(-3px);
              -ms-transform: translateY(-3px);
              -o-transform: translateY(-3px);
              transform: translateY(-3px);
            }
            .name {
              font-size: 18px;
              font-weight: bold;
              color: #16315c;
              display: inline-block;
              position: relative;
              &:after {
                display: inline-block;
                width: 10px;
                height: 10px;
                content: '';
                border-radius: 50%;
                margin-left: 10px;
                -webkit-transform: translateY(-2px);
                -moz-transform: translateY(-2px);
                -ms-transform: translateY(-2px);
                -o-transform: translateY(-2px);
                transform: translateY(-2px);
              }
              &.online {
                &:after {
                  background-color: #218ff8;
                  box-shadow: 0px 3px 8px 0px rgba(60, 146, 233, 0.67);
                }
              }
              &.noOnline {
                &:after {
                  background-color: #b2bdc5;
                  box-shadow: 0px 3px 8px 0px #c6cad4;
                }
              }
            }
            .comment {
              width: 90px;
              height: 28px;
              border-radius: 3px;
              border: solid 1px #3c92e8;
              font-size: 14px;
              line-height: 28px;
              text-align: center;
              color: #3c92e8;
              float: right;
              cursor: pointer;
              margin: 18px 20px 0 0;
              -webkit-transition: all .2s linear;
              -moz-transition: all .2s linear;
              -ms-transition: all .2s linear;
              -o-transition: all .2s linear;
              transition: all .2s linear;
              &:hover {
                background-color: #3c92e8;
                color: #fff;
              }
            }
            .changeT {
              width: 90px;
              height: 28px;
              background-color: #3c92e8;
              border-radius: 3px;
              float: right;
              cursor: pointer;
              line-height: 28px;
              text-align: center;
              font-size: 14px;
              color: #ffffff;
              margin: 18px 20px 0 0;
              -webkit-transition: all .2s linear;
              -moz-transition: all .2s linear;
              -ms-transition: all .2s linear;
              -o-transition: all .2s linear;
              transition: all .2s linear;
              &:hover {
                background-color: #1f80cb;
              }
            }
          }
          .siliaochatBox {
            height: 400px;
            padding: 10px 0;
            .siliaochatBoxUl {
              max-height: 380px;
              width: 100%;
              li {
                overflow: hidden;
                margin-bottom: 10px;
                &:last-child {
                  margin-bottom: 0;
                }
                .touxiang {
                  float: left;
                  width: 38px;
                  height: 38px;
                  border-radius: 50%;
                  margin-right: 26px;
                  margin-top: 25px;
                }
                .messageBox {
                  float: left;
                  max-width: 400px;
                  text-align: center;
                  .time {
                    font-size: 12px;
                    color: #737699;
                  }
                  .info {
                    padding: 6px 20px 6px 13px;
                    font-size: 14px;
                    color: #233e68;
                    background: #fff;
                    border-radius: 16px;
                    margin-top: 4px;
                    position: relative;
                    text-align: left;
                    line-height: 20px;
                    img {
                      max-height: 70px;
                      cursor: pointer;
                      float: initial;
                    }
                    &:before {
                      position: absolute;
                      content: '';
                      width: 0;
                      height: 0;
                      top: 10px;
                      left: -11px;
                      border-top: 6px solid transparent;
                      border-bottom: 6px solid transparent;
                      border-right: 6px solid #fff;
                      border-left: 6px solid transparent;
                    }
                  }
                }
                &.myself {
                  text-align: right;
                  img {
                    float: right;
                    margin-left: 26px;
                  }
                  .messageBox {
                    float: right;
                    .info {
                      background: #3c92e9;
                      color: #ffffff;
                      &:before {
                        right: -11px;
                        border-right: 6px solid transparent;
                        border-left: 6px solid #3c92e9;
                        left: auto;
                      }
                      img {
                        float: initial;
                        margin: 0;
                      }
                    }
                  }
                }
              }
            }
            &.kefuchatBox {
              height: 480px;
              .siliaochatBoxUl {
                max-height: 460px;
              }
            }
          }
          .sendBox {
            height: 80px;
            background-color: #ffffff;
            box-shadow: 0px -2px 9px 0px rgba(60, 146, 233, 0.09);
            border-radius: 5px;
            width: 100%;
            padding: 0 15px;
            position: relative;
            .ivu-poptip-popper {
              position: absolute!important;
            }
            .sendBoxTop {
              padding-top: 6px;
              height: 30px;
              img {
                cursor: pointer;
              }
              .chatImg {
                width: 24px;
                height: 18px;
                background: url("../assets/img/private/pic_icon.png");
                display: inline-block;
                margin-left: 10px;
              }
              .chatFace {
                width: 20px;
                height: 20px;
                background: url("../assets/img/private/biaioqing_icon.png");
                display: inline-block;
              }
              .emergency {
                font-size: 14px;
                color: #fd8923;
                display: inline-block;
                position: relative;
                cursor: pointer;
                -webkit-transform: translateY(-4px);
                -moz-transform: translateY(-4px);
                -ms-transform: translateY(-4px);
                -o-transform: translateY(-4px);
                transform: translateY(-4px);
                margin-left: 10px;
                &:before {
                  content: '';
                  width: 16px;
                  height: 14px;
                  background: url("../assets/img/private/jinji_icon.png");
                  display: inline-block;
                  margin-right: 5px;
                  -webkit-transform: translateY(2px);
                  -moz-transform: translateY(2px);
                  -ms-transform: translateY(2px);
                  -o-transform: translateY(2px);
                  transform: translateY(2px);
                }
                .quser {
                  width: 14px;
                  height: 14px;
                  background: url("../assets/img/private/question_icon.png");
                  display: inline-block;
                  -webkit-transform: translateY(2px);
                  -moz-transform: translateY(2px);
                  -ms-transform: translateY(2px);
                  -o-transform: translateY(2px);
                  transform: translateY(2px);
                  .jinjiBox {
                    width: 325px;
                    height: 210px;
                    background-color: #ffffff;
                    box-shadow: 0px 5px 15px 0px rgba(68, 146, 225, 0.26);
                    border: solid 1px #dde1e6;
                    padding: 8px;
                    position: absolute;
                    bottom: -4px;
                    right: -336px;
                    display: none;
                    &:before {
                      position: absolute;
                      content: '';
                      width: 0;
                      height: 0;
                      bottom: 10px;
                      left: -11px;
                      border-top: 6px solid transparent;
                      border-bottom: 6px solid transparent;
                      border-right: 6px solid #fff;
                      border-left: 6px solid transparent;
                    }
                    p {
                      font-size: 12px;
                      color: #395480;
                      line-height: 19px;
                    }
                  }
                  &:hover {
                    .jinjiBox {
                      display: block;
                    }
                  }
                }
              }
            }
            textarea {
              height: 50px;
              width: 100%;
              font-size: 12px;
              color: #333;
              border: none;
            }
            .sendBtn {
              width: 71px;
              height: 71px;
              top: 8px;
              right: 0px;
              position: absolute;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .reportPop {
    width: 310px;
    background-color: #ffffff;
    border-radius: 10px;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 24px 24px 22px;
      height: 100%;
      .closeBtn {
        width: 40px;
        height: 40px;
        content: '';
        display: block;
        transition: background .2s linear;
        background: url("../assets/img/strategy/close_hover_icon.png");
        position: absolute;
        cursor: pointer;
        top: -15px;
        right: -15px;
      }
      .title {
        font-size: 16px;
        color: #222222;
        text-align: center;
        &:after {
          content: '';
          display: inline-block;
          width: 20px;
          height: 2px;
          background-color: #282828;
          margin-left: 10px;
          -webkit-transform: translateY(-4px);
          -moz-transform: translateY(-4px);
          -ms-transform: translateY(-4px);
          -o-transform: translateY(-4px);
          transform: translateY(-4px);
        }
        &:before {
          content: '';
          display: inline-block;
          width: 20px;
          height: 2px;
          background-color: #282828;
          margin-right: 10px;
          -webkit-transform: translateY(-4px);
          -moz-transform: translateY(-4px);
          -ms-transform: translateY(-4px);
          -o-transform: translateY(-4px);
          transform: translateY(-4px);
        }
      }
      .el-radio-group {
        margin-top: 14px;
        margin-bottom: 6px;
        .el-radio {
          margin-left: 0;
          margin-bottom: 8px;
          .el-radio__label {
            font-size: 14px;
            color: #4f4f4f;
            padding-left: 16px;
          }
        }
      }
      .tishi {
        font-size: 12px;
        color: #de4414;
      }
      textarea {
        width: 100%;
        height: 100px;
        background: #f2f6fd;
        border-radius: 3px;
        border: solid 1px #f2f6fd;
        padding: 10px;
        font-size: 12px;
        color: #333;
        margin: 6px 0 14px 0;
      }
      .code {
        margin-bottom: 20px;
        input {
          width: 150px;
          height: 35px;
          background: #f2f6fd;
          border-radius: 3px;
          border: solid 1px #f2f6fd;
          font-size: 12px;
          color: #333;
          padding-left: 8px;
        }
        img {
          width: 100px;
          height: 35px;
          margin-left: 6px;
        }
      }
      .allBtn {
        text-align: center;
        a {
          display: inline-block;
          width: 120px;
          height: 35px;
          line-height: 35px;
          border-radius: 3px;
          font-size: 14px;
          cursor: pointer;
          -webkit-transition: all .2s linear;
          -moz-transition: all .2s linear;
          -ms-transition: all .2s linear;
          -o-transition: all .2s linear;
          transition: all .2s linear;
          &.cancel {
            border: solid 1px #d4ddeb;
            color: #8d9aae;
            margin-right: 16px;
            &:hover {
              background-color: #3c92e9;
              border: solid 1px #3c92e9;
              color: #ffffff;
            }
          }
          &.submit {
            background-color: #3c92e9;
            border: solid 1px #3c92e9;
            color: #ffffff;
            &:hover {
              background-color: #1f80cb;
              border: solid 1px #1f80cb;
            }
          }
        }
      }
    }
  }
  .comTeache {
    width: 400px;
    background-color: #ffffff;
    border-radius: 6px;
    .el-dialog__header {
      padding: 10px 0 10px 20px;
      border-radius: 6px 6px 0 0;
      border-bottom: 1px solid #e5e5e5;
      font-size: 16px;
      color: #333333;
      .el-dialog__headerbtn {
        top: 10px!important;
        right: 14px!important;
      }
    }
    .el-dialog__body {
      text-align: center;
      padding: 18px 0px 8px;
      .el-radio+.el-radio {
        margin-left: 80px;
        .el-radio__label {
          font-size: 14px;
          color: #333;
        }
      }
      textarea {
        width: 370px;
        height: 145px;
        background: #f2f6fd;
        border-radius: 3px;
        border: solid 1px #f2f6fd;
        padding: 15px 20px;
        font-size: 12px;
        color: #333;
        margin: 18px 0 21px;
      }
      .allBtn {
        padding: 8px 12px 0 0;
        text-align: right;
        border-top: 1px solid #e5e5e5;
        a {
          display: inline-block;
          width: 115px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-radius: 3px;
          -webkit-transition: all .2s linear;
          -moz-transition: all .2s linear;
          -ms-transition: all .2s linear;
          -o-transition: all .2s linear;
          transition: all .2s linear;
          cursor: pointer;
          &.cancel {
            border: solid 1px #e4e4e4;
            color: #999;
            margin-right: 16px;
            &:hover {
              background-color: #3c92e9;
              border: solid 1px #3c92e9;
              color: #ffffff;
            }
          }
          &.submit {
            background-color: #3c92e9;
            border: solid 1px #3c92e9;
            color: #ffffff;
            &:hover {
              background-color: #1f80cb;
              border: solid 1px #1f80cb;
            }
          }
        }
      }
    }
  }
  .askClose {
    width: 400px;
    background-color: #ffffff;
    border-radius: 6px;
    .el-dialog__header {
      padding: 10px 0 10px 20px;
      border-radius: 6px 6px 0 0;
      border-bottom: 1px solid #e5e5e5;
      font-size: 16px;
      color: #333333;
      .el-dialog__headerbtn {
        top: 10px!important;
        right: 14px!important;
      }
    }
    .el-dialog__body {
      padding: 18px 0px 8px;
      .info {
        padding: 0 48px;
        text-align: center;
        p:nth-of-type(1) {
          font-size: 16px;
          font-weight: bold;
          color: #3c92e8;
          margin-bottom: 6px;
        }
        p:nth-of-type(2) {
          font-size: 14px;
          color: #333333;
          margin-bottom: 8px;
        }
        p:nth-of-type(3) {
          font-size: 12px;
          color: #de4414;
          text-align: left;
          line-height: 14px;
          margin-bottom: 22px;
        }
      }
      .allBtn {
        padding: 8px 12px 0 0;
        text-align: right;
        border-top: 1px solid #e5e5e5;
        a {
          display: inline-block;
          width: 115px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-radius: 3px;
          -webkit-transition: all .2s linear;
          -moz-transition: all .2s linear;
          -ms-transition: all .2s linear;
          -o-transition: all .2s linear;
          transition: all .2s linear;
          cursor: pointer;
          &.cancel {
            width: 97px;
            border: solid 1px #e4e4e4;
            color: #999;
            margin-right: 16px;
            &:hover {
              background-color: #3c92e9;
              border: solid 1px #3c92e9;
              color: #ffffff;
            }
          }
          &.submit {
            background-color: #3c92e9;
            border: solid 1px #3c92e9;
            color: #ffffff;
            &:hover {
              background-color: #1f80cb;
              border: solid 1px #1f80cb;
            }
          }
        }
      }
    }
  }
  .chooseClose {
    width: 400px;
    background-color: #ffffff;
    border-radius: 6px;
    .el-dialog__header {
      padding: 10px 0 10px 20px;
      border-radius: 6px 6px 0 0;
      border-bottom: 1px solid #e5e5e5;
      font-size: 16px;
      color: #333333;
      .el-dialog__headerbtn {
        top: 10px!important;
        right: 14px!important;
      }
    }
    .el-dialog__body {
      padding: 44px 0px 8px;
      .info {
        padding: 0 72px;
        text-align: center;
        p:nth-of-type(1) {
          font-size: 16px;
          color: #333;
          margin-bottom: 6px;
          line-height: 22px;
        }
        p:nth-of-type(2) {
          font-size: 14px;
          color: #999999;
          margin-bottom: 18px;
        }
      }
      .allBtn {
        padding: 8px 12px 0 0;
        text-align: right;
        border-top: 1px solid #e5e5e5;
        a {
          display: inline-block;
          width: 115px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-radius: 3px;
          -webkit-transition: all .2s linear;
          -moz-transition: all .2s linear;
          -ms-transition: all .2s linear;
          -o-transition: all .2s linear;
          transition: all .2s linear;
          cursor: pointer;
          &.cancel {
            width: 97px;
            border: solid 1px #e4e4e4;
            color: #999;
            margin-right: 16px;
            &:hover {
              background-color: #3c92e9;
              border: solid 1px #3c92e9;
              color: #ffffff;
            }
          }
          &.submit {
            background-color: #3c92e9;
            border: solid 1px #3c92e9;
            color: #ffffff;
            &:hover {
              background-color: #1f80cb;
              border: solid 1px #1f80cb;
            }
          }
        }
      }
    }
  }
  .teacherList {
    &.moreFive {
      width: 680px;
    }
    width: auto;
    background-color: #ffffff;
    border-radius: 10px;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 24px 0px 16px;
      height: 100%;
      .closeBtn {
        width: 40px;
        height: 40px;
        content: '';
        display: block;
        transition: background .2s linear;
        background: url("../assets/img/strategy/close_hover_icon.png");
        position: absolute;
        cursor: pointer;
        top: -15px;
        right: -15px;
      }
      .title {
        font-size: 16px;
        color: #222222;
        text-align: center;
        font-weight: bold;
        &:after {
          content: '';
          display: inline-block;
          width: 20px;
          height: 2px;
          background-color: #282828;
          margin-left: 10px;
          -webkit-transform: translateY(-4px);
          -moz-transform: translateY(-4px);
          -ms-transform: translateY(-4px);
          -o-transform: translateY(-4px);
          transform: translateY(-4px);
        }
        &:before {
          content: '';
          display: inline-block;
          width: 20px;
          height: 2px;
          background-color: #282828;
          margin-right: 10px;
          -webkit-transform: translateY(-4px);
          -moz-transform: translateY(-4px);
          -ms-transform: translateY(-4px);
          -o-transform: translateY(-4px);
          transform: translateY(-4px);
        }
      }
      .znawu {
        text-align: center;
        font-size: 18px;
        color: #333;
        margin: 20px 0;
      }
      .swiper-view {
        position: relative;
        padding: 0 65px;
        .swiper-container {
          padding-top: 22px;
          .swiper-slide {
            .slideBox {
              display: block;
              width: 108px;
              float: left;
              text-align: center;
              margin-right: 38px;
              margin-bottom: 30px;
              &:nth-of-type(4n) {
                margin-right: 0px;
              }
              &.lessFour {
                &:last-child {
                  margin-right: 0px;
                }
              }
              img {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                border: solid 1px #c3cad8;
              }
              .name {
                line-height: 14px;
                margin: 8px 0 6px;
                span {
                  max-width: 90px;
                  font-size: 14px;
                  color: #333333;
                  display: inline-block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  line-height: 14px;
                  margin-left: 4px;
                }
                i {
                  display: inline-block;
                  width: 14px;
                  height: 14px;
                  background: url("../assets/img/private/kongbai.png");
                  cursor: pointer;
                  &.active {
                    background: url("../assets/img/private/xuanz.png");
                  }
                }
              }
              .haop {
                font-size: 12px;
                color: #3c92e8;
                line-height: 12px;
                &:after,&:before {
                  width: 10px;
                  height: 9px;
                  content: '';
                  display: inline-block;
                  background: url("../assets/img/private/xx.png");
                }
                &:after {
                  margin-left: 4px;
                }
                &:before {
                  margin-right: 4px;
                }
              }
            }
          }
        }
        .button-prev-z {
          position: absolute;
          top: 50%;
          left: 10px;
          width: 40px;
          height: 40px;
          background: url("../assets/img/private/left.png");
          cursor: pointer;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
          &:hover {
            background: url("../assets/img/private/right.png");
            -webkit-transform: rotate(-180deg) translateY(50%);;
            -moz-transform: rotate(-180deg) translateY(50%);;
            -ms-transform: rotate(-180deg) translateY(50%);;
            -o-transform: rotate(-180deg) translateY(50%);;
            transform: rotate(-180deg) translateY(50%);;
          }
        }
        .button-next-z {
          position: absolute;
          top: 50%;
          right: 10px;
          width: 40px;
          height: 40px;
          background: url("../assets/img/private/left.png");
          -webkit-transform: rotate(-180deg) translateY(50%);;
          -moz-transform: rotate(-180deg) translateY(50%);;
          -ms-transform: rotate(-180deg) translateY(50%);;
          -o-transform: rotate(-180deg) translateY(50%);;
          transform: rotate(-180deg) translateY(50%);;
          cursor: pointer;
          &:hover {
            background: url("../assets/img/private/right.png");
            -webkit-transform: rotate(0deg) translateY(-50%);;
            -moz-transform: rotate(0deg) translateY(-50%);;
            -ms-transform: rotate(0deg) translateY(-50%);;
            -o-transform: rotate(0deg) translateY(-50%);;
            transform: rotate(0deg) translateY(-50%);;
          }
        }
      }
      .bottomBtn {
        text-align: center;
        line-height: 35px;
        span {
          display: inline-block;
          width: 100px;
          height: 35px;
          line-height: 35px;
          background-color: #3c92e8;
          border-radius: 3px;
          cursor: pointer;
          font-size: 16px;
          color: #ffffff;
          -webkit-transition: all .2s linear;
          -moz-transition: all .2s linear;
          -ms-transition: all .2s linear;
          -o-transition: all .2s linear;
          transition: all .2s linear;
          &:hover {
            background: #1f80cb;
          }
        }
        a {
          font-size: 14px;
          -webkit-transition: all .2s linear;
          -moz-transition: all .2s linear;
          -ms-transition: all .2s linear;
          -o-transition: all .2s linear;
          transition: all .2s linear;
          color: #8699b9;
          margin-left: 18px;
          cursor: pointer;
          &:hover {
            color: #3c92e8;
          }
        }
      }
    }
  }
</style>
